import React, { memo, useEffect, useState } from "react";
import SongSheetWarrper from "./style";
import btns from "./data";
import { useDispatch, useSelector } from "react-redux";
import { getSongSheetInfo } from "@/store/modules/songSheetSlice";
import SongSheetItem from "@/components/song-sheet-item/index";
import classNames from "classnames";
import Loading from "@/base-ui/Loading";

const index = memo(() => {
  const dispatch = useDispatch();
  const [checkedBtn, changeCheck] = useState(btns[0] || "全部");
  useEffect(() => {
    if(code!==200){
        dispatch(getSongSheetInfo(checkedBtn));
    }
  }, []);
  const { cat, playlists,code } = useSelector((state) => {
    return state.songsheet.songSheet;
  });
  const changeCatAjax = (n) => {
    changeCheck(n);
    dispatch(getSongSheetInfo(n));
  };
  return (
    <SongSheetWarrper>
      <ul className="btns">
        {btns?.map((n, i) => {
          return (
            <li
              className={classNames("btn-item", { active: n == checkedBtn })}
              key={i}
              onClick={(e) => changeCatAjax(n)}
            >
              {n}
            </li>
          );
        })}
      </ul>
      <h3>{cat}</h3>
      <ul className="main-items">
        {playlists?.map((n, i) => {
          return <SongSheetItem n={n} i={i} key={i} type="B" />;
        })}
        {/* <SongSheetItem/>
        <SongSheetItem/> */}
      </ul>
      <Loading/>
    </SongSheetWarrper>
  );
});

export default index;
